<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>作业2浮动练习</title>
	<style>
	        *{margin:0;padding:0;}
		    li{
		    	list-style-type:none;
		    }
		    .list{
		    	width:630px;
		    	margin:0 auto;
		    }
		    .list>li{
		    	width:150px;
		    	height:50px;
		        margin-left:10px;
			    background-color: #ccc;
			    text-align: center;
			    line-height: 50px;
			    float:left;
		    }
		    .list>li:first-child{
		    	margin-left:0;
		    }
		    .list>li>ul{
		    	padding-top:10px;
		    	display:none;
                 
		    }
		    .list>li>ul>li{
		    	width:150px;
		    	height:50px;
		    	background:#fff;
		    	margin-top:10px;
		    }
		    .list>li:hover ul{
		    	display:block;
		    }
		    .list>li>ul>li:hover{
		    	background:pink;
		    	color:#fff;
		    }
	</style>
</head>
<body>
	  <nav class="list">
           <li>items01
               <ul>
                   <li>第1个</li>
                   <li>第2个</li>
                   <li>第3个</li>
                   <li>第4个</li>             	
               </ul>           	
           </li>
           <li>items02
           	   <ul>
                   <li>第1个</li>
                   <li>第2个</li>
                   <li>第3个</li>
                   <li>第4个</li>             	
               </ul>  
           </li>
           <li>items03
           	   <ul>
                   <li>第1个</li>
                   <li>第2个</li>
                   <li>第3个</li>
                   <li>第4个</li>             	
               </ul>  
           </li>
           <li>items04
           	   <ul>
                   <li>第1个</li>
                   <li>第2个</li>
                   <li>第3个</li>
                   <li>第4个</li>             	
               </ul>  
           </li>
	  </nav>
</body>
</html>